<template>
  <div class="content">
    <div class="border">
      <div v-for="index in 6" class="circle" :style="circleStyle(index)">
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
  .content {
    height: 60px;
    width: 100%;
  }

  .border {
    position: relative;
    margin: 5px;
    height: 60px;
    width: 60px;
    margin-left: auto;
    margin-right: auto;
  }

  @startdeg: 0deg;
  @enddeg: @startdeg+360;
  @keyframes loading-rotate {
    0% {
      transform: matrix(1, 0, 0, 1, 0, 0) rotate(@startdeg);
    }
    50% {
      transform: matrix(1, 0, 0, 1, 0, 0) rotate(@enddeg);
    }
    100% {
      transform: matrix(1, 0, 0, 1, 0, 0) rotate(@enddeg);
    }
  }

  .circle {
    position: absolute;
    left: 24px;
    .loop(@index) when (@index =< 7) {
      &:nth-child(@{index}) {
        top: unit(@index, px);
        animation: loading-rotate 3s infinite ease;
        animation-delay: unit(0.0+0.15*@index, s);
        transform-origin: unit(@index, px) unit(30-@index, px);
      }
      .loop(@index + 1);
    }
    .loop(0);
  }
</style>

<script>
  export default{
    props: {
      height: {
        type: Number,
        default: 10
      },
      color: {
        type: String,
        default: '#f00',
      }
    },
    computed: {},
    methods: {
      circleStyle(index){
        let style = {};
        console.log(index)
        style.borderRadius = ((7-index) ) + 'px';
        style.height = ((7-index) * 2 ) + 'px';
        style.width = ((7-index) * 2 ) + 'px';
        style.backgroundColor = this.color;

        let xpos = (index * 36);
        style.transform = 'matrix(1,0,0,1,0,0) rotate(' + 0 + 'deg)';
        let document = this.$refs;
        console.log('document:', style);
        return style;
      }
    }
  }
</script>
